<template>
  <div
    class="flex items-center mt-[8px]"
    v-for="(item, index) in first_weight_add_renewal"
    :key="item"
  >
    <div class="space">
      续重 {{ index + 1 }} :
      <el-input
        v-model="item.rule_min_value"
        placeholder="最小值"
        style="width: 150px"
        clearable
        type="number"
        :min="0"
        filterable
      >
        <template #append>Kg</template>
      </el-input>
    </div>
    <div class="space">
      <div>&lt;重量</div>
    </div>
    <div class="space">
      &le;
      <el-input
        v-model="item.rule_max_value"
        placeholder="最大值"
        style="width: 150px"
        clearable
        type="number"
        :min="0"
        filterable
      >
        <template #append>Kg</template>
      </el-input>
    </div>
    <div class="space">
      附加费
      <el-select
        v-model="item.surcharge_calc_type"
        placeholder="请选择"
        class="space-width"
        clearable
        filterable
      >
      <!-- options['surcharge_calc_type'] -->
        <el-option
          :label="it.label"
          :value="it.value"
          v-for="it in dynamicValue"
          :key="it"
          :disabled="it.disabled"
        />
      </el-select>
      <el-input
        v-model="item.surcharge"
        placeholder="请输入"
        style="width: 150px"
        clearable
        type="number"
        :min="0"
        filterable
      >
        <template
          v-if="surchargeCalcTypeMap[item?.surcharge_calc_type]"
          #append
          >{{ surchargeCalcTypeMap[item.surcharge_calc_type] }}</template
        >
      </el-input>
      <el-select
        v-model="item.calc_fuel_mode"
        placeholder="请选择"
        class="space-width"
        clearable
        filterable
      >
        <el-option
          :label="it.label"
          :value="it.value"
          v-for="it in options['surcharge_calc_fuel_mode']"
          :key="it"
          placeholder="是否计算燃油"
          :disabled="it.disabled"
        />
      </el-select>
      <el-input
        v-model="item.calc_discount_value"
        placeholder="请输入折扣"
        style="width: 150px"
        class="space"
        clearable
        type="number"
        :min="0"
        filterable
      >
      </el-input>
    </div>
    <div class="space">
      <span
        class="hover:text-[#2080f0] cursor-pointer mr-[8px]"
        @click="handleAddWeight(index)"
      >
        <SvgIcon icon-class="Plus" class="text-[12px] inline" />
      </span>
      <span
        class="hover:text-[#2080f0] cursor-pointer"
        @click="handleDeleteWeight(index)"
        v-if="first_weight_add_renewal?.length > 1"
        ><SvgIcon icon-class="Minus" class="text-[12px] inline" />
      </span>
    </div>
  </div>
</template>
<script setup lang="jsx">
import SvgIcon from "@/components/SvgIcon/index.vue";
const props = defineProps({
  modelValue: { type: Array, default: () => [] },
  options: { type: Object, default: () => {} },
  surchargeCalcTypeMap: { type: Object, default: () => {} },
});
const emit = defineEmits(["update:modelValue"]);
const { options, surchargeCalcTypeMap } = toRefs(props);
const first_weight_add_renewal = computed({
  get() {
    return props.modelValue?.filter(
      (item) => item.weight_type !== "FIRST_WEIGHT"
    );
  },
  set(val) {
    emit("update:modelValue", val);
  },
});
const getOpt = inject("getOpt");
// 通过计算属性实现动态响应返回值
const dynamicValue = computed(() => {
  return getOpt('first_weight_add_renewal'); // 调用父组件提供的方法
});
const handleAddWeight = (index) => {
  let str = {
    key: +new Date(),
  };
  const updatedValue = [...first_weight_add_renewal.value];
  updatedValue.splice(index + 1, 0, str);
  emit("update:modelValue", updatedValue);
};
const handleDeleteWeight = (index) => {
  const updatedValue = [...first_weight_add_renewal.value];
  updatedValue.splice(index, 1);
  emit("update:modelValue", updatedValue);
};
</script>
<style lang="scss" scoped>
.space {
  margin-right: 8px;
}
.space-width {
  width: 150px;
}
</style>
